<template>
  <a-modal v-model="visible" title="排座总览" :footer="null" width="80%">
    <div class="seat-container">
      <div class="legend">
        <div v-for="(value, key, index) in seatStatus" :key="index" class="item">
          <div :style="{ background: value.color }">
            <a-icon
              v-if="key === 'CheckedIn'"
              type="check-circle"
              theme="filled"
              style="font-size: 12px;color: #FFFFFF;"
            />
          </div>
          <span>{{ value.span }}（{{ value.num }}）</span>
        </div>
      </div>
      <div class="seat-list">
        <div v-for="(item, index) in groupVoList" :key="index" class="group">
          <div class="box tableName">{{ item.name }}</div>
          <div class="seat-number-list">
            <div
              class="box"
              style="justify-content: flex-start;"
              v-for="(seat, seatIndex) in item.seatVoList"
              :seatIndex="seatIndex"
              :style="{ background: getStatus(seat).color }"
            >
              <div class="disFlxAC">
                <a-icon
                  class="_mr-4"
                  v-if="seat.signStatus"
                  type="check-circle"
                  theme="filled"
                  style="font-size: 14px;color: #FFFFFF;"
                />
                <img
                  v-if="seat.userId === -1"
                  class="_mr-4"
                  src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/lock.png"
                  style="width: 14px;"
                />
                <div class="name ov-1" :style="{ color: getStatus(seat).nameFontColor }">
                  {{ getStatus(seat).userName }}
                </div>
              </div>

              <div class="seat-number ov-1" :style="{ color: getStatus(seat).displayNameFontColor }">
                {{ seat.displayName }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>
<script>
import { selectArrangeAllSeatView } from '@/api/activity/activity'
const seatStatusNum = {
  Unoccupied: 0,
  Occupied: 0,
  CheckedIn: 0
}
export default {
  data() {
    return {
      visible: false,
      groupVoList: [],

      seatStatus: {
        Unoccupied: {
          span: '空座位',
          color: '#F2F3F5',
          nameFontColor: '#1D2129',
          displayNameFontColor: '#86909C',
          num: 0
        },
        Scheduled: {
          span: '已排座',
          color: '#165DFF', // 例如，为排座指定橙色
          nameFontColor: '#FFFFFF',
          displayNameFontColor: '#FFFFFF',
          num: 0
        },
        Occupied: {
          span: '已占座',
          color: '#165DFF', // 已占座保持原蓝色
          nameFontColor: '#FFFFFF',
          displayNameFontColor: '#FFFFFF',
          num: 0
        },
        CheckedIn: {
          span: '已签到',
          color: '#00B42A',
          nameFontColor: '#FFFFFF',
          displayNameFontColor: '#FFFFFF',
          num: 0
        }
      }
    }
  },

  watch: {
    groupVoList() {
      this.seatStatus.Unoccupied.num = 0
      this.seatStatus.CheckedIn.num = 0
      this.seatStatus.Occupied.num = 0
      this.seatStatus.Scheduled.num = 0
      for (let index = 0; index < this.groupVoList.length; index++) {
        for (let seatIndex = 0; seatIndex < this.groupVoList[index].seatVoList.length; seatIndex++) {
          const element = this.groupVoList[index].seatVoList[seatIndex]
          if (!element.userId) {
            this.seatStatus.Unoccupied.num++
            continue
          }
          if (element.signStatus) {
            this.seatStatus.CheckedIn.num++
            this.seatStatus.Scheduled.num++
            continue
          }
          if (element.userId === -1) {
            this.seatStatus.Occupied.num++
            continue
          }
          this.seatStatus.Scheduled.num++
        }
      }
    }
  },

  methods: {
    async openModel(currentID) {
      this.visible = true
      const res = await selectArrangeAllSeatView(currentID)
      this.groupVoList = res.data
    },
    getStatus(item) {
      if (!item.userId) {
        return { ...this.seatStatus.Unoccupied, userName: item.userName || '空' }
      }
      if (item.signStatus) {
        return { ...this.seatStatus.CheckedIn, userName: item.userName || '空' }
      }
      if (item.userId === -1) {
        return { ...this.seatStatus.Occupied, userName: item.userName || '占座', nameFontColor: '#FADC19' }
      }
      return { ...this.seatStatus.Scheduled, userName: item.userName || '排座' }
    }
  }
}
</script>
<style lang="less" scoped>
.seat-container {
  .legend {
    display: flex;
    gap: 40px;
    margin-bottom: 20px;
    .item {
      display: flex;
      gap: 8px;
      align-items: center;
      > div {
        width: 16px;
        height: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 2px;
      }
      > span {
        font-size: 14px;
      }
    }
  }
  .seat-list {
    padding: 20px;
    padding-left: 0;
    border-radius: 8px;
    border: 1px dashed #c9cdd4;
    background: #fff;
    max-height: calc(100vh - 344px);
    overflow: auto;
    .group {
      display: flex;
      gap: 16px;
      flex-wrap: nowrap;
      margin-bottom: 16px;
      min-width: min-content;  // 添加最小宽度
      .tableName {
        position: sticky;  // 添加粘性定位
        left: 0px;       // 与父容器的 padding 对应
        z-index: 1;       // 确保在其他元素之上
        background: #FFF;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
        margin-left: 20px;
      }
      .box {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 96px;
        height: 54px;
        padding: 5px 8px;
        flex-shrink: 0;
        border-radius: 2px;
      }
      .seat-number-list {
        display: flex;
        gap: 16px;
        flex-wrap: nowrap;
        .name {
          font-size: 14px;
          line-height: 22px;
        }
        .seat-number {
          color: #86909c;
          font-size: 14px;
          line-height: 22px;
        }
      }
    }
  }
}
</style>
